<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix FormElementMixin</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/AutoSizeTextarea.js"></script>
    <script type="module" src="../define/AutoCompleteComboBox.js"></script>
    <script type="module" src="../define/CalendarMonthNavigator.js"></script>
  </head>

  <body role="main">
    <div class="demo padded" style="min-width: 300px;">
      <style>
        #sampleForm > div + div {
          margin-top: 1em;
        }

        #resultFrame {
          border: 1px solid gray;
          width: 100%;
        }

        #formsNotSupported {
          display: none;
        }
      </style>
      <p>
        The form below contains custom elements whose values will be submitted
        with the form.
      </p>
      <form
        id="sampleForm"
        target="formTarget"
        action="../demos/displayQueryParameters.html"
      >
        <div>
          <elix-auto-size-textarea
            aria-label="Sample auto-sizing textarea"
            name="body"
            value="Hello"
          ></elix-auto-size-textarea>
        </div>
        <div>
          <label>
            Pet:
            <elix-auto-complete-combo-box name="pet">
              <div>Canary</div>
              <div>Cat</div>
              <div>Chicken</div>
              <div>Chinchilla</div>
              <div>Cockatiel</div>
              <div>Cricket</div>
              <div>Dog</div>
              <div>Ferret</div>
              <div>Finch</div>
              <div>Fish</div>
              <div>Frog</div>
              <div>Gerbil</div>
              <div>Guinea Pig</div>
              <div>Hamster</div>
              <div>Hermit Crab</div>
              <div>Lizard</div>
              <div>Mouse</div>
              <div>Parakeet</div>
              <div>Parrot</div>
              <div>Pig</div>
              <div>Rabbit</div>
              <div>Rat</div>
              <div>Snail</div>
              <div>Snake</div>
              <div>Spider</div>
              <div>Turtle</div>
            </elix-auto-complete-combo-box>
          </label>
        </div>
        <div>
          <elix-calendar-month-navigator
            label="Birthday"
            name="birthday"
          ></elix-calendar-month-navigator>
        </div>
        <div>
          <button type="submit" id="formSubmit">Submit</button>
          <span id="formsNotSupported">
            Your browser does not support form-associated custom elements. As of
            September 2019, form features are only available in Chrome and Edge
            development builds.
          </span>
        </div>
      </form>
      <hr />
      <p>
        Form submission results:
      </p>
      <iframe id="resultFrame" name="formTarget"></iframe>
      <script>
        if (!("ElementInternals" in window)) {
          formSubmit.disabled = true;
          formsNotSupported.style.display = "inline";
        }
      </script>
    </div>
  </body>
</html>
